<template>
	<view class="j-order-details">
		<!-- 导航栏 -->
		<view class="j-order-nav">
			<status-bar></status-bar>
			<!-- 导航栏 -->
			<view class="j-i-nav">
				<view class="j-i-title">订单详情</view>
				<view class="hxf hxf-zuobian" @click="back"></view>
			</view>
			<!-- 订单状态 -->
			<view class="j-order-s">{{ toOrderStatus(orderInfo.orderMall.orderState) }}</view>
		</view>

		<!-- 收货地址 -->
		<view class="j-confirm-o-box" style="margin-top: -80rpx;">
			<view class="j-confirm-o-bg">
				<view class="j-confirm-address">
					<view class="j-confirm-a-icon"><image src="http://s499jfz9e.hb-bkt.clouddn.com/store/index/i-pos.png" mode=""></image></view>
					<view class="j-confirm-a-info">
						<view class="j-confirm-a-people">{{ orderInfo.vipLogistics.consigneeName }} {{ orderInfo.vipLogistics.consigneePhone }}</view>
						<view class="j-confirm-a-position">{{ orderInfo.vipLogistics.consigneeAddress }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="j-confirm-o-box">
			<view class="j-confirm-o-bg">
				<view class="j-confirm-goods">
					<view class="j-confirm-g-info">
						<view class="j-confirm-g-image"><image :src="orderInfo.orderMall.goodsImages" mode="aspectFill"></image></view>
						<view class="j-confirm-g-details">
							<view class="j-confirm-g-goods">
								<view class="j-confirm-g-name">{{ orderInfo.orderMall.goodsName }}</view>
								<view class="j-confirm-g-sku">{{ toSKU(orderInfo.orderMall.goodsSku) }}</view>
							</view>
							<view class="j-confirm-g-price">
								<view class="j-confirm-g-p">
									￥
									<text class="j-confirm-g-unm">{{ orderInfo.orderMall.goodsPrice ? orderInfo.orderMall.goodsPrice : '0.00' }}</text>
								</view>
								<view class="j-confirm-g-n">x{{ orderInfo.orderMall.goodsNum ? orderInfo.orderMall.goodsNum : '1' }}</view>
							</view>
						</view>
					</view>
					<view class="j-confirm-g-zhidou">
						<!-- <view class="j-confirm-g-title">赠送知豆</view> -->
						<view class="j-goods-integral">
							<view class="j-goods-i-box">
								<view class="j-goods-i-title">赠</view>
								<view class="j-goods-i-value">知豆{{ orderInfo.orderMall.integral ? orderInfo.orderMall.integral : '0' }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 费用信息 -->
		<view class="j-confirm-o-box">
			<view class="j-confirm-o-bg">
				<view class="j-confirm-buy-info">
					<view class="j-confirm-buy-row">
						<view class="j-confirm-buy-title">商品总金额</view>
						<view class="j-confirm-buy-value">￥{{ orderInfo.orderMall.totalGoods ? orderInfo.orderMall.totalGoods : '0.00' }}</view>
					</view>
					<view class="j-confirm-buy-row">
						<view class="j-confirm-buy-title">运费</view>
						<view class="j-confirm-buy-value">￥{{ orderInfo.orderMall.totalFreight ? orderInfo.orderMall.totalFreight : '0.00' }}</view>
					</view>
					<view class="j-confirm-buy-row">
						<view class="j-confirm-buy-title">余额抵扣</view>
						<view class="j-confirm-buy-value">￥{{ orderInfo.orderMall.balanceDeduction ? orderInfo.orderMall.balanceDeduction : '0.00' }}</view>
					</view>
					<view class="j-confirm-buy-row" v-if="orderInfo.orderMall.payAmount">
						<view class="j-confirm-buy-title">支付金额</view>
						<view class="j-confirm-buy-value">￥{{ orderInfo.orderMall.payAmount ? orderInfo.orderMall.payAmount : '0.00' }}</view>
					</view>
					<view class="j-confirm-buy-row">
						<view class="j-confirm-buy-title">合计：</view>
						<view class="j-confirm-buy-value">￥{{ orderInfo.orderMall.totalAmount ? orderInfo.orderMall.totalAmount : '0.00' }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="j-confirm-o-box">
			<view class="j-confirm-o-bg">
				<view class="j-confirm-buy-info">
					<view class="j-confirm-buy-row">
						<view class="j-confirm-buy-title">订单编号</view>
						<view class="j-confirm-buy-value">{{ orderInfo.orderMall.mallOrderCode }}</view>
					</view>
					<view class="j-confirm-buy-row" v-if="orderInfo.orderMall.payMethod">
						<view class="j-confirm-buy-title">支付方式</view>
						<view class="j-confirm-buy-value">
							<template v-if="orderInfo.orderMall.payMethod == 'alipay'">支付宝支付</template>
							<template v-if="orderInfo.orderMall.payMethod == 'wechat'">微信支付</template>
						</view>
					</view>
					<view class="j-confirm-buy-row">
						<view class="j-confirm-buy-title">创建时间</view>
						<view class="j-confirm-buy-value">{{ orderInfo.orderMall.createTime }}</view>
					</view>
					<view class="j-confirm-buy-row" v-if="orderInfo.orderMall.paySuccessTime">
						<view class="j-confirm-buy-title">支付时间</view>
						<view class="j-confirm-buy-value">{{ orderInfo.orderMall.paySuccessTime }}</view>
					</view>
					<view class="j-confirm-buy-row" v-if="orderInfo.vipLogistics.sendTime">
						<view class="j-confirm-buy-title">发货时间</view>
						<view class="j-confirm-buy-value">{{ orderInfo.vipLogistics.sendTime }}</view>
					</view>
					<view class="j-confirm-buy-row" v-if="orderInfo.vipLogistics.getTime">
						<view class="j-confirm-buy-title">收货时间</view>
						<view class="j-confirm-buy-value">{{ orderInfo.vipLogistics.getTime }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="j-confirm-total" v-if="orderInfo.orderMall.orderState != 5">
			<view class="j-confirm-total-box">
				<template v-if="orderInfo.orderMall.orderState == 3 || orderInfo.orderMall.orderState == 4">
					<view class="j-confirm-pay-btn"><u-button class="j-confirm-pay" shape="circle" @click="toOrderLogisticsTracking(orderInfo.orderMall)">查看物流</u-button></view>
				</template>
				<template v-if="orderInfo.orderMall.orderState == 1 || orderInfo.orderMall.orderState == 2">
					<view class="j-confirm-pay-btn"><u-button class="j-confirm-pay" shape="circle" @click="showCancelOrder(orderInfo.orderMall)">取消订单</u-button></view>
				</template>
				<template v-if="orderInfo.orderMall.orderState == 3">
					<view class="j-confirm-pay-btn"><u-button class="j-confirm-pay" shape="circle" @click="showConfirmReceipt(orderInfo.orderMall)">确认收货</u-button></view>
				</template>
			</view>
		</view>

		<!-- 取消订单询问 -->
		<u-modal
			v-model="isShowCancelOrder"
			ref="cancelOrder"
			@confirm="postOrderCancel"
			:show-confirm-button="true"
			:show-cancel-button="true"
			content="确定取消当前订单？"
		></u-modal>
		<!-- 确认收货询问 -->
		<u-modal
			v-model="isShowConfirmReceipt"
			ref="confirmReceipt"
			@confirm="postConfirmReceipt"
			:show-confirm-button="true"
			:show-cancel-button="true"
			content="请确保已收到货物在确认收货!是否确认收货？"
		></u-modal>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowCancelOrder: false,
			isShowConfirmReceipt: false,
			params: {
				mallOrderId: ''
			},
			orderInfo: {
				orderMall: {},
				vipLogistics: {},
				logistics: ''
			},
			mallOrderId: ''
		};
	},
	onLoad(e) {
		this.params.mallOrderId = e.mallOrderId;
		// console.log(e.mallOrderId)
		this.postGetOrderMallById();
	},
	methods: {
		// 跳转物流跟踪
		toOrderLogisticsTracking(item) {
			uni.navigateTo({
				url: './order-logistics-tracking?mallOrderId=' + item.mallOrderId
			});
		},
		// 查询订单详情
		postGetOrderMallById() {
			this.$u.api
				.postGetOrderMallById(this.params)
				.then(res => {
					console.log(res, '[订单详情页面-查询订单详情接口]');
					if (res.data.orderMall) {
						if (res.data.orderMall.goodsSku != null) {
							res.data.orderMall.goodsPrice = JSON.parse(res.data.orderMall.goodsSku).price;
							res.data.orderMall.integral = JSON.parse(res.data.orderMall.goodsSku).integral;
							res.data.orderMall.goodsImages = JSON.parse(res.data.orderMall.goodsSku).specImages;
							res.data.orderMall.purchasePrice = JSON.parse(res.data.orderMall.goodsSku).purchasePrice;
						}
					}
					this.orderInfo = res.data;
				})
				.catch(err => {
					console.log(err);
					this.$refs.cancelOrder.clearLoading();
				});
		},
		// 显示询问取消订单
		showCancelOrder(item) {
			this.mallOrderId = item.mallOrderId;
			this.isShowCancelOrder = true;
		},
		// 显示询问确认收货
		showConfirmReceipt(item) {
			this.mallOrderId = item.mallOrderId;
			this.isShowConfirmReceipt = true;
		},
		// 取消订单
		postOrderCancel() {
			this.$u.api
				.postOrderCancel({
					mallOrderId: this.mallOrderId
				})
				.then(res => {
					console.log(res, '[订单详情页面-取消订单接口]');
					this.$refs.uToast.show({
						title: '取消订单成功'
					});
					this.postGetOrderMallById();
					this.isShowCancelOrder = false;
				})
				.catch(err => {
					console.log(err);
					this.$refs.cancelOrder.clearLoading();
				});
		},
		// 确认收货
		postConfirmReceipt() {
			this.$u.api
				.postConfirmReceipt({
					mallOrderId: this.mallOrderId
				})
				.then(res => {
					console.log(res, '[订单详情页面-确认收货接口]');
					this.$refs.uToast.show({
						title: '确认收货成功'
					});
					this.postGetOrderMallById();
					this.isShowConfirmReceipt = false;
				})
				.catch(err => {
					console.log(err);
					this.$refs.confirmReceipt.clearLoading();
				});
		},
		// 规格
		toSKU(skuList) {
			let specValue = '';
			if (skuList) {
				specValue = JSON.parse(skuList).specValue;
			}
			return specValue;
		},
		// 订单状态
		toOrderStatus(orderStatus) {
			let str = '';
			if (orderStatus == 1) str = '待付款';
			if (orderStatus == 2) str = '待发货';
			if (orderStatus == 3) str = '待收货';
			if (orderStatus == 4) str = '已完成';
			if (orderStatus == 5) str = '交易关闭';
			return str;
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>
<style scoped lang="scss">
.j-order-details {
	.j-confirm-total {
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		background-color: #ffffff;

		.j-confirm-total-box {
			display: flex;
			width: 750rpx;
			align-items: center;
			justify-content: flex-end;
			padding: 0 25rpx;

			.j-confirm-pay-btn {
				margin-left: 10rpx;

				&:first-of-type {
					margin-left: 0;
				}
			}

			.j-confirm-pay {
				height: 60rpx;
				font-size: 26rpx;
				width: 190rpx;
			}
		}
	}

	.j-confirm-buy-info {
		padding: 5rpx 22rpx;

		.j-confirm-buy-row {
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.j-confirm-buy-title {
				display: flex;
				align-items: center;
			}

			.j-confirm-buy-dec {
				color: #9c9c9c;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}
	}

	.j-confirm-goods {
		padding: 20rpx 22rpx;

		.j-confirm-g-info {
			display: flex;
			align-items: flex-start;

			.j-confirm-g-details {
				margin-left: 10rpx;
				height: 170rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.j-confirm-g-goods {
					.j-confirm-g-sku {
						color: #9c9c9c;
						font-size: 26rpx;
					}
					.j-confirm-g-name {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}

				.j-confirm-g-price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.j-confirm-g-unm {
						font-size: 36rpx;
					}

					.j-confirm-g-n {
						color: #9c9c9c;
					}
				}
			}

			.j-confirm-g-image {
				width: 170rpx;
				min-width: 170rpx;
				height: 170rpx;
				border-radius: 14rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.j-confirm-g-zhidou {
			display: flex;
			align-items: center;
			margin-top: 25rpx;
			justify-content: space-between;
		}
	}

	.j-order-nav {
		height: 302rpx;
		background: linear-gradient(90deg, rgba(254, 208, 0, 1), rgba(254, 189, 0, 1));

		.j-order-s {
			font-size: 33rpx;
			padding: 10rpx 40rpx;
		}
	}

	.j-confirm-o-box {
		padding: 0rpx 25rpx;
		margin-top: 20rpx;

		.j-confirm-o-bg {
			border-radius: 14rpx;
			background-color: #ffffff;
		}
	}

	.j-confirm-address {
		display: flex;
		align-items: center;
		padding: 20rpx 22rpx;
		min-height: 116rpx;

		.j-confirm-a-icon {
			width: 42rpx;
			height: 42rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.j-confirm-a-info {
			flex: 1;
			margin-left: 20rpx;

			.j-confirm-a-position {
				margin-top: 5rpx;
			}
		}

		.hxf-youbian {
			font-size: 45rpx;
			color: #797979;
		}
	}

	.j-i-nav {
		position: relative;
		display: flex;
		height: 88rpx;
		align-items: center;
		padding: 0 30rpx;
		justify-content: center;

		.j-i-title {
			color: #333333;
			font-size: 35rpx;
		}

		.hxf-zuobian {
			position: absolute;
			left: 20rpx;
			font-size: 50rpx;
			color: #333333;
		}
	}
}

.j-goods-integral {
	display: flex;

	.j-goods-i-box {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(254, 166, 2, 1);
		border-radius: 5rpx;
		font-size: 28rpx;

		.j-goods-i-title {
			color: #ffffff;
			display: flex;
			padding: 0 10rpx;
			align-items: center;
			justify-content: center;
			background-color: #fea602;
		}

		.j-goods-i-value {
			color: #fea602;
			padding: 0 10rpx;
		}
	}
}
</style>
